import React, { useEffect, useState } from 'react'
import PieStyle from './pie.module.css'
import { Select, Table } from 'antd';
import PieChartComponent from './PieChart';
function PieComponent() {
const [TypeVal,setTypeVal]=useState('产品大类')
const SettlementColums=[
  {
    key:"1",
    title:"公司",
    dataIndex:"公司",
  },{
    key:"2",
    title:"1月",
    dataIndex:"1月"
  },{
    key:"3",
    title:"2月",
    dataIndex:"2月"
  },
  {
    key:"4",
    title:"3月",
    dataIndex:"3月"
  },
  {
    key:"5",
    title:"4月",
    dataIndex:"4月"
  },{
    key:"6",
    title:"5月",
    dataIndex:"5月"
  },{
    key:"7",
    title:"6月",
    dataIndex:"6月"
  },
  {
    key:"8",
    title:"Q1",
    dataIndex:"Q1"
  },{
    key:"9",
    title:"Q2",
    dataIndex:"Q2"
  },{
    key:"10",
    title:"7月",
    dataIndex:"7月"
  },
  {
    key:"11",
    title:"8月",
    dataIndex:"8月"
  },{
    key:"12",
    title:"9月",
    dataIndex:"9月"
  },{
    key:"13",
    title:"10月",
    dataIndex:"10月"
  },{
    key:"14",
    title:"11月",
    dataIndex:"11月"
  },{
    key:"15",
    title:"12月",
    dataIndex:"12月"
  }
]
const InvoicingColums=[
  {
    key:"1",
    title:"公司",
    dataIndex:"公司",
  },{
    key:"2",
    title:"1月",
    dataIndex:"1月"
  },{
    key:"3",
    title:"2月",
    dataIndex:"2月"
  },
  {
    key:"4",
    title:"3月",
    dataIndex:"3月"
  },
  {
    key:"5",
    title:"4月",
    dataIndex:"4月"
  },{
    key:"6",
    title:"5月",
    dataIndex:"5月"
  },{
    key:"7",
    title:"6月",
    dataIndex:"6月"
  },
  {
    key:"8",
    title:"Q1",
    dataIndex:"Q1"
  },{
    key:"9",
    title:"Q2",
    dataIndex:"Q2"
  },{
    key:"10",
    title:"7月",
    dataIndex:"7月"
  },
  {
    key:"11",
    title:"8月",
    dataIndex:"8月"
  },{
    key:"12",
    title:"9月",
    dataIndex:"9月"
  },{
    key:"13",
    title:"10月",
    dataIndex:"10月"
  },{
    key:"14",
    title:"11月",
    dataIndex:"11月"
  },{
    key:"15",
    title:"12月",
    dataIndex:"12月"
  }
]
const RefundColums=[
  {
    key:"1",
    title:"公司",
    dataIndex:"公司",
  },{
    key:"2",
    title:"1月",
    dataIndex:"1月"
  },{
    key:"3",
    title:"2月",
    dataIndex:"2月"
  },
  {
    key:"4",
    title:"3月",
    dataIndex:"3月"
  },
  {
    key:"5",
    title:"4月",
    dataIndex:"4月"
  },{
    key:"6",
    title:"5月",
    dataIndex:"5月"
  },{
    key:"7",
    title:"6月",
    dataIndex:"6月"
  },
  {
    key:"8",
    title:"Q1",
    dataIndex:"Q1"
  },{
    key:"9",
    title:"Q2",
    dataIndex:"Q2"
  },{
    key:"10",
    title:"7月",
    dataIndex:"7月"
  },
  {
    key:"11",
    title:"8月",
    dataIndex:"8月"
  },{
    key:"12",
    title:"9月",
    dataIndex:"9月"
  },{
    key:"13",
    title:"10月",
    dataIndex:"10月"
  },{
    key:"14",
    title:"11月",
    dataIndex:"11月"
  },{
    key:"15",
    title:"12月",
    dataIndex:"12月"
  }
]
const onChangeSelect=(value)=>{
  setTypeVal(value)
}
  return (
    <div className={PieStyle.Pie_app}>
      <Select style={{width:200}} options={[
        {
          key:"1",
          label:"产品大类",
          value:"产品大类"
        },
        {
          key:"2",
          label:"产品小类",
          value:"产品小类"
        }
      ]}
      onChange={onChangeSelect}
      />
         {/* <ReactEcharts option={option} style={{width:"100%",height:"300px"}}/> */}
         <PieChartComponent type={TypeVal}/>
         <div className={PieStyle.Pie_Table}>
            <p className={PieStyle.Pie_Table_title}>结算数据</p>
            <Table columns={SettlementColums} style={{width:"100%"}}
            scroll={{
              x: 1000,
            }}
            />
         </div>
         <div className={PieStyle.Pie_Table}>
          <p className={PieStyle.Pie_Table_title}>开票数据</p>
          <Table columns={InvoicingColums} style={{width:"100%"}} scroll={{x:1000}}/>
         </div>
         <div className={PieStyle.Pie_Table}>
          <p className={PieStyle.Pie_Table_title}>回款数据</p>
          <Table columns={RefundColums} style={{width:"100%"}} scroll={{x:1000}}/>
         </div>
    </div>
  )
}

export default PieComponent
